<template>
    <div
        style="width: 100%;padding-bottom: 2rem; background-color: #f2f2f2; display: flex;flex-direction: column;justify-content: start;align-items: center;">
        <div
            style="width: 95%; display: flex; flex-direction: column; justify-content: start; align-items: center;margin-top: 2rem; background-color: white;">
            <el-form :model="form" label-width="120px" style="width: 95%; margin-top: 5rem;">
                <el-form-item label="角色名称:" style="width: 500px;">
                    <el-input v-model="form.name" placeholder="请输入角色名称" />
                </el-form-item>
                <el-form-item label="添加权限:">
                    <el-checkbox label="全部" v-model="checkAll" @change="handleselChange" />

                    <el-divider class="checkbox-divider" content-position="left" style="opacity: 0;"></el-divider>
                    <el-checkbox label="会员管理" v-model="checkAllhuiyuan" :indeterminate="isIndeterminatehuiyuan"
                        @change="handleselhuiyuanChange" />
                    <el-checkbox-group v-model="form.selhuiyuan" style="width: 100%;" @change="handlehuiyuan">
                        <el-divider class="checkbox-divider" content-position="left"></el-divider>
                        <el-checkbox :label="v" v-for="(v, i) in form.huiyuan" :key="i">{{ v }}</el-checkbox>
                    </el-checkbox-group>

                    <el-divider class="checkbox-divider" content-position="left" style="opacity: 0;"></el-divider>
                    <el-checkbox label="优惠券" v-model="checkAllyouhui" :indeterminate="isIndeterminateyouhui"
                        @change="handleselyouhuiChange" />
                    <el-checkbox-group v-model="form.selyouhui" style="width: 100%;" @change="handleyouhui">
                        <el-divider class="checkbox-divider" content-position="left"></el-divider>
                        <el-checkbox v-for="(v, i) in form.youhui" :key="i" :label="v">{{ v }}</el-checkbox>
                    </el-checkbox-group>

                    <el-divider class="checkbox-divider" content-position="left" style="opacity: 0;"></el-divider>
                    <el-checkbox label="商品" v-model="checkAllshangpin" :indeterminate="isIndeterminateshangpin"
                        @change="handleselshangpinChange" />
                    <el-checkbox-group v-model="form.selshangpin" style="width: 100%;" @change="handleshangpin">
                        <el-divider class="checkbox-divider" content-position="left"></el-divider>
                        <el-checkbox v-for="(v, i) in form.shangpin" :key="i" :label="v">{{ v }}</el-checkbox>
                    </el-checkbox-group>

                    <el-divider class="checkbox-divider" content-position="left" style="opacity: 0;"></el-divider>
                    <el-checkbox label="订单管理" v-model="checkAlldingdan" :indeterminate="isIndeterminatedingdan"
                        @change="handleseldingdanChange" />
                    <el-checkbox-group v-model="form.seldingdan" style="width: 100%;" @change="handledingdan">
                        <el-divider class="checkbox-divider" content-position="left"></el-divider>
                        <el-checkbox v-for="(v, i) in form.dingdan" :key="i" :label="v">{{ v }}</el-checkbox>
                    </el-checkbox-group>

                    <el-divider class="checkbox-divider" content-position="left" style="opacity: 0;"></el-divider>
                    <el-checkbox label="客房管理" v-model="checkAllkefang" :indeterminate="isIndeterminatekefang"
                        @change="handleselkefangChange" />
                    <el-checkbox-group v-model="form.selkefang" style="width: 100%;" @change="handlekefang">
                        <el-divider class="checkbox-divider" content-position="left"></el-divider>
                        <el-checkbox v-for="(v, i) in form.kefang" :key="i" :label="v">{{ v }}</el-checkbox>
                    </el-checkbox-group>

                    <el-divider class="checkbox-divider" content-position="left" style="opacity: 0;"></el-divider>
                    <el-checkbox label="投诉建议" v-model="checkAlltousu" :indeterminate="isIndeterminatetousu"
                        @change="handleseltousuChange" />
                    <el-checkbox-group v-model="form.seltousu" style="width: 100%;" @change="handletousu">
                        <el-divider class="checkbox-divider" content-position="left"></el-divider>
                        <el-checkbox v-for="(v, i) in form.tousu" :key="i" :label="v">{{ v }}</el-checkbox>
                    </el-checkbox-group>

                    <el-divider class="checkbox-divider" content-position="left" style="opacity: 0;"></el-divider>
                    <el-checkbox label="设置" v-model="checkAllshezhi" :indeterminate="isIndeterminateshezhi"
                        @change="handleselshezhiChange" />
                    <el-checkbox-group v-model="form.selshezhi" style="width: 100%;" @change="handleshezhi">
                        <el-divider class="checkbox-divider" content-position="left"></el-divider>
                        <el-checkbox v-for="(v, i) in form.shezhi" :key="i" :label="v">{{ v }}</el-checkbox>
                    </el-checkbox-group>

                    <el-divider class="checkbox-divider" content-position="left" style="opacity: 0;"></el-divider>
                    <el-checkbox label="用户管理" v-model="checkAllyonghu" :indeterminate="isIndeterminateyonghu"
                        @change="handleselyonghuChange" />
                    <el-checkbox-group v-model="form.selyonghu" style="width: 100%;" @change="handleyonghu">
                        <el-divider class="checkbox-divider" content-position="left"></el-divider>
                        <el-checkbox v-for="(v, i) in form.yonghu" :key="i" :label="v">{{ v }}</el-checkbox>
                    </el-checkbox-group>

                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" style="margin: auto;">保存</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'
import router from '@/router';
import { roleToken } from '../../api/Admin/AdminApi'
import { useRoute } from 'vue-router';
let route = useRoute()
import { ref, reactive } from 'vue'
const form: any = reactive({
    name: '',
    selhuiyuan: [],
    huiyuan: ['会员信息查看', '会员信息修改', '会员积分修改', '会员充值', '充值设置', '积分设置', '充值记录', '消费记录'],
    selyouhui: [],
    youhui: ['优惠券信息查看', '优惠券信息修改', '优惠券发放'],
    selshangpin: [],
    shangpin: ['商品信息查看', '商品信息修改', '商品分类信息修改'],
    seldingdan: [],
    dingdan: ['商品订单查看', '商品订单处理', '客房订单查看', '客房订单处理', '住宿记录查看'],
    selkefang: [],
    kefang: ['房态查看', '房态修改', '房型查看', '房型修改', '房号查看', '房号修改'],
    seltousu: [],
    tousu: ['投诉建议查看', '投诉建议处理'],
    selshezhi: [],
    shezhi: ['微信设置', '酒店设置', '其它设置'],
    selyonghu: [],
    yonghu: ['用户查看', '用户修改', '角色查看', '角色修改']

})

const checkAllhuiyuan = ref(false)
const isIndeterminatehuiyuan = ref(true)
const checkAll = ref(false)
const handleselhuiyuanChange = (val: boolean) => {
    form.selhuiyuan = val ? form.huiyuan : []
    isIndeterminatehuiyuan.value = false
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }

}
const handlehuiyuan = (value: string[]) => {
    const checkedCount = value.length
    checkAllhuiyuan.value = checkedCount === form.huiyuan.length
    isIndeterminatehuiyuan.value = checkedCount > 0 && checkedCount < form.huiyuan.length
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }

}

const checkAllyouhui = ref(false)
const isIndeterminateyouhui = ref(true)
const handleselyouhuiChange = (val: boolean) => {
    form.selyouhui = val ? form.youhui : []
    isIndeterminateyouhui.value = false
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }

}
const handleyouhui = (value: string[]) => {
    const checkedCount = value.length
    checkAllyouhui.value = checkedCount === form.youhui.length
    isIndeterminateyouhui.value = checkedCount > 0 && checkedCount < form.youhui.length
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }
}

const checkAllshangpin = ref(false)
const isIndeterminateshangpin = ref(true)
const handleselshangpinChange = (val: boolean) => {
    form.selshangpin = val ? form.shangpin : []
    isIndeterminateshangpin.value = false
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }
}
const handleshangpin = (value: string[]) => {
    const checkedCount = value.length
    checkAllshangpin.value = checkedCount === form.shangpin.length
    isIndeterminateshangpin.value = checkedCount > 0 && checkedCount < form.shangpin.length
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }

}

const checkAlldingdan = ref(false)
const isIndeterminatedingdan = ref(true)
const handleseldingdanChange = (val: boolean) => {
    form.seldingdan = val ? form.dingdan : []
    isIndeterminatedingdan.value = false
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }
}
const handledingdan = (value: string[]) => {
    const checkedCount = value.length
    checkAlldingdan.value = checkedCount === form.dingdan.length
    isIndeterminatedingdan.value = checkedCount > 0 && checkedCount < form.dingdan.length
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }

}

const checkAllkefang = ref(false)
const isIndeterminatekefang = ref(true)
const handleselkefangChange = (val: boolean) => {
    form.selkefang = val ? form.kefang : []
    isIndeterminatekefang.value = false
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }
}
const handlekefang = (value: string[]) => {
    const checkedCount = value.length
    checkAllkefang.value = checkedCount === form.kefang.length
    isIndeterminatekefang.value = checkedCount > 0 && checkedCount < form.kefang.length
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }

}

const checkAlltousu = ref(false)
const isIndeterminatetousu = ref(true)
const handleseltousuChange = (val: boolean) => {
    form.seltousu = val ? form.tousu : []
    isIndeterminatetousu.value = false
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }
}
const handletousu = (value: string[]) => {
    const checkedCount = value.length
    checkAlltousu.value = checkedCount === form.tousu.length
    isIndeterminatetousu.value = checkedCount > 0 && checkedCount < form.tousu.length
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }

}

const checkAllshezhi = ref(false)
const isIndeterminateshezhi = ref(true)
const handleselshezhiChange = (val: boolean) => {
    form.selshezhi = val ? form.shezhi : []
    isIndeterminateshezhi.value = false
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }
}
const handleshezhi = (value: string[]) => {
    const checkedCount = value.length
    checkAllshezhi.value = checkedCount === form.shezhi.length
    isIndeterminateshezhi.value = checkedCount > 0 && checkedCount < form.shezhi.length
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }

}

const checkAllyonghu = ref(false)
const isIndeterminateyonghu = ref(true)
const handleselyonghuChange = (val: boolean) => {
    form.selyonghu = val ? form.yonghu : []
    isIndeterminateyonghu.value = false
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }
}
const handleyonghu = (value: string[]) => {
    const checkedCount = value.length
    checkAllyonghu.value = checkedCount === form.yonghu.length
    isIndeterminateyonghu.value = checkedCount > 0 && checkedCount < form.yonghu.length
    if (form.selhuiyuan.length + form.selyouhui.length + form.selshangpin.length + form.seldingdan.length + form.selkefang.length + form.seltousu.length + form.selshezhi.length + form.selyonghu.length == 34) {
        checkAll.value = true
    } else {
        checkAll.value = false
    }
}

// 全选
const handleselChange = (val: boolean) => {
    form.selyonghu = val ? form.yonghu : []
    form.selshezhi = val ? form.shezhi : []
    form.seltousu = val ? form.tousu : []
    form.selkefang = val ? form.kefang : []
    form.seldingdan = val ? form.dingdan : []
    form.selshangpin = val ? form.shangpin : []
    form.selyouhui = val ? form.youhui : []
    form.selhuiyuan = val ? form.huiyuan : []


}


let formTree = reactive<any>({
    "会员信息查看": 1,
    "会员信息修改": 2,
    "会员积分修改": 3,
    "会员充值": 4,
    "充值设置": 5,
    "积分设置": 6,
    "充值记录": 7,
    "消费记录": 8,
    "优惠券信息查看": 9,
    "优惠券信息修改": 10,
    "优惠券发放": 11,
    "商品信息查看": 12,
    "商品信息修改": 13,
    "商品分类信息修改": 14,
    "商品订单查看": 15,
    "商品订单处理": 16,
    "客房订单查看": 17,
    "客房订单处理": 18,
    "住宿记录查看": 19,
    "房态查看": 20,
    "房态修改": 21,
    "房型查看": 22,
    "房型修改": 23,
    "房号查看": 24,
    "房号修改": 25,
    "投诉建议查看": 26,
    "投诉建议处理": 27,
    "微信设置": 28,
    "酒店设置": 29,
    "其它设置": 30,
    "用户查看": 31,
    "用户修改": 32,
    "角色查看": 33,
    "角色修改": 34
})
let a = "角色修改"
const onSubmit = async () => {
    let outTree = [...form.selhuiyuan, ...form.selyouhui, ...form.selshangpin, ...form.seldingdan, ...form.selkefang, ...form.seltousu, ...form.selshezhi, ...form.selyonghu]
    let newArr: any = []
    outTree.forEach((v: any) => {
        newArr.push(formTree[v])
    })

    let { data }: { [propsName: string]: any } = await roleToken({
        id: Number(route.query.id),
        permissionIds: newArr
    })
    if (data.code == 0) {
        ElMessage({
            message: '保存成功',
            type: 'success',
        })
    }

    console.log({
        id: route.query.id,
        ids: newArr
    })


}
</script>

<style scoped lang="less">
.firstItem {
    margin-right: 0px;
    border: none;
}

.admin-header {
    width: 95%;
    margin-top: 1rem;
    display: flex;
    flex-direction: row-reverse;
}

.checkbox-divider {
    flex-basis: 100%;
    width: 100%;
    margin: 10px 0;
}
</style>